<template>
    <div>
        <div class="card_leftbox">
            <el-form :inline="true" :model="monthForm" class="demo-form-inline">
                <el-form-item label="选择日期">
                    <div class="block">
                        <el-date-picker 
                            v-model="monthForm.time"  
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择时间">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="fetchLeft()">查询</el-button>
                </el-form-item>
            </el-form>
            <div id="left_month"></div>
        </div> 
        <div class="card_rightbox">
            <el-form :inline="true" :model="yearForm" class="demo-form-inline">
                <el-form-item label="选择日期">
                    <div class="block">
                        <el-date-picker 
                        v-model="yearForm.time"  
                        value-format="yyyy"
                        type="year" 
                        placeholder="选择时间">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small" @click="fetchRight()">查询</el-button>
                </el-form-item>
            </el-form>
            <div id="right_year"></div>
        </div> 
    </div>
</template>

<script>
import { activeUrl } from "@/config/env"
const urls = {
    getData : activeUrl + "/datas/datas/statistics",
}
export default {
    data () {
        return {
            optionLeft : {
                title : {
                    text : "请假人次-月统计",
                    left : "center",
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'line',
                    itemStyle : { normal: {label : {show: true}}}
                }]
            },
            optionRight : {
                title : {
                    text : "请假人次-年统计",
                    left : "center",
                },
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'line',
                    itemStyle : { normal: {label : {show: true}}}
                }]
            },
            yearForm : {
                time : ""
            },
            monthForm : {
                time : ""
            },
        }
    },
    methods : {
        fetchLeft() {
            //左侧数据接口  
            this.optionLeft.xAxis.data = [];
            axios.post(urls.getData,{ formatType : "月",date : this.monthForm.time}).then((res) => {
                var arr = [];
                arr.length = this.getDaysInOneMonth(this.monthForm.time.slice(0,4),this.monthForm.time.slice(5,7));
                for(var i = 1; i < arr.length + 1 ; i ++ ) {
                    this.optionLeft.xAxis.data.push(i);
                    this.optionLeft.series[0].data[i-1] = '0';
                    for(var key in res.data.result) {
                       if(i == key) {
                           this.optionLeft.series[0].data[i-1] =  res.data.result[key]
                       }
                    }
                }
                this.drawEchart("left_month",this.optionLeft);
            })  
        },
        fetchRight() {
            //右侧数据接口
            axios.post(urls.getData,{ formatType : "年",date : this.yearForm.time}).then((res) => {
                var arr = [];
                arr.length = 12;
                for(var i = 1; i < arr.length + 1 ; i ++ ) {
                    this.optionRight.series[0].data[i-1] = '0';
                    for(var key in res.data.result) {
                       if(i == key) {
                           this.optionRight.series[0].data[i-1] =  res.data.result[key]
                       }
                    }
                }
                this.drawEchart("right_year",this.optionRight); 
            })
        },
        drawEchart(id,option) {
            //初始化echart
            let myChart = this.$echarts.init(document.getElementById(id));
            myChart.setOption(option);
        },
        fetch() {
            this.fetchLeft();
            this.fetchRight();
        },
        getDaysInOneMonth(year, month){
            month = parseInt(month,10);
            var d= new Date(year,month,0);  
            var date = new Date(year+"/"+month+"/0")   
            return d.getDate();
        },
        getNowFormatDate(data) {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = '';
            if(data === "month") {
                currentdate = year + seperator1 + month;
            }else if(data === "year") {
                currentdate = year;
            }else {
                currentdate = year + seperator1 + month + seperator1 + strDate;
            }
            return currentdate;
        }
    },
    mounted() {
        this.monthForm.time = this.getNowFormatDate('month');
        this.yearForm.time = String(this.getNowFormatDate('year'));
        this.fetch(); 
    },
}
</script>
<style scoped>
.el-form {
    padding-left : 60px;
}
.demo-form-inline {
    margin-bottom: 30px;
}
.card_leftbox {
    height: 89%;
    position: absolute;
    left: 1%;
    width: 48.5%;
    padding-top: 30px;
    background: #fff;
}
.card_rightbox {
    height: 89%;
    position: absolute;
    right: 1%;
    width: 48.5%;
    padding-top: 30px;
    background: #fff;
}
#left_month {
    width: 100%;
    height: 70%;
}
#right_year {
    width: 100%;
    height: 70%;
}
.el-input__inner {
    height: 33px;
    line-height: 33px;
}
</style>
    